<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .active{
        background-color: red;
    }
</style>
<body>

<table border="1">
    <tr>
        <th>商品</th>
        <th>规格</th>
        <th>计件方式</th>
        <th>成本</th>
        <th>计算成本</th>
    </tr>
    <tbody>
    <tr class="active">
        <td>泡沫</td>
        <td>1件</td>
        <td style="text-align: center">1</td>
        <td>10</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>灭火器</td>
        <td>一个</td>
        <td style="text-align: center">1</td>
        <td>20</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>泡沫</td>
        <td>1件</td>
        <td style="text-align: center">1</td>
        <td>10</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>灭火器</td>
        <td>一个</td>
        <td style="text-align: center">1</td>
        <td>20</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>泡沫</td>
        <td>1件</td>
        <td style="text-align: center">1</td>
        <td>10</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>灭火器</td>
        <td>一个</td>
        <td style="text-align: center">1</td>
        <td>20</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>泡沫</td>
        <td>1件</td>
        <td style="text-align: center">1</td>
        <td>10</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>灭火器</td>
        <td>一个</td>
        <td style="text-align: center">1</td>
        <td>20</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>泡沫</td>
        <td>1件</td>
        <td style="text-align: center">1</td>
        <td>10</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>灭火器</td>
        <td>一个</td>
        <td style="text-align: center">1</td>
        <td>20</td>
        <td>$100</td>
    </tr> <tr>
        <td>泡沫</td>
        <td>1件</td>
        <td style="text-align: center">1</td>
        <td>10</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>灭火器</td>
        <td>一个</td>
        <td style="text-align: center">1</td>
        <td>20</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>泡沫</td>
        <td>1件</td>
        <td style="text-align: center">1</td>
        <td>10</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>灭火器</td>
        <td>一个</td>
        <td style="text-align: center">1</td>
        <td>20</td>
        <td>$100</td>
    </tr>
    </tbody>


</table>


</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="__CDN__/assets/extends/dist/jquery.mousewheel.min.js"></script>
<script>
    $(window).mousewheel(function(event){
        // console.log(event.deltaX, event.deltaY, event.deltaFactor);
        console.log(event.deltaX, event.deltaY, event.deltaFactor);

        var dir = event.deltaY > 0 ? 'Up' : 'Down';
        if (dir == 'Up') {
            if($('.active').prev().length >0) {
                that = $('.active')
                that.attr('class', '')
                that.prev('tr').attr('class', 'active')
                // console.log('向上滚动');
            }
        } else {
            if($('.active').next().length >0){
                that = $('.active')
                that.attr('class','')
                that.next('tr').attr('class','active')
                // console.log('向下滚动');
            }
        }
        // return false;

    });
    document.onkeydown=function(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];

        if(e && e.keyCode==40){ //下
        }
        if(e && e.keyCode==37){ //左
        }
        if(e && e.keyCode==39){ //右
        }
        if(e && e.keyCode==38){ // 上
        }
    };
</script>